<template>
  <div>
    <van-swipe :autoplay="3000" indicator-color="black">
      <van-swipe-item v-for="(item,index) in images" :key="index">
        <img v-lazy="item">
      </van-swipe-item>
    </van-swipe>
    <van-tabs v-model="active" sticky animated color="#28AA32">
      <van-tab v-for="(item,index) in tabs" :key="index">
        <div slot="title">
          <span style="color:#28AA32;">{{ item.name }}</span>
        </div>
        <van-pull-refresh style="width:100%;height:100%;" v-model="isLoading" @refresh="onRefresh">
          <van-card
            v-for="(item,index) in goods"
            :key="index"
            num="2"
            price="2.00"
            desc="描述信息"
            :title="item.title"
            :thumb="imageURL"
            origin-price="10.00"
          >
            <div slot="num">
              <p>库存2</p>
            </div>
            <div slot="tags">
              <van-tag plain type="danger">活动促销</van-tag>
            </div>
          </van-card>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import {
  PullRefresh,
  Cell,
  CellGroup,
  List,
  Toast,
  Tab,
  Tabs,
  Lazyload
} from "vant";
Vue.use(PullRefresh)
  .use(Cell)
  .use(CellGroup)
  .use(List)
  .use(Toast)
  .use(Tab)
  .use(Lazyload)
  .use(Tabs);

export default {
  data() {
    return {
      active: 0,

      count: 0,

      tab: "标签",

      isLoading: false,

      finished: false,

      imageURL:
        "https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg",

      tabs: [
        {
          name: "酒水"
        },
        {
          name: "家用电器"
        },
        {
          name: "副食品"
        },
        {
          name: "休闲小吃"
        },
        {
          name: "生鲜"
        },
        {
          name: "厨房电器"
        }
      ],
      images: [
        "https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg",
        "https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg",
        "https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg",
        "https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg"
      ],
      goods: [
        { title: "十大发" },
        { title: "史蒂芬" },
        { title: "赶得上" },
        { title: "1" },
        { title: "2" },
        { title: "3" },
        { title: "4" },
        { title: "第三方" },
        { title: "5" },
        { title: "6" },
        { title: "7" },
        { title: "8" },
        { title: "9" },
        { title: "0" },
        { title: "12" },
        { title: "赶得上" },
        { title: "1" },
        { title: "2" },
        { title: "3" },
        { title: "4" },
        { title: "第三方" },
        { title: "5" },
        { title: "6" },
        { title: "7" },
        { title: "8" },
        { title: "9" },
        { title: "0" },
        { title: "12" }
      ]
    };
  },

  methods: {
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.count++;
        this.finished = false;
        this.isLoading = false;
      }, 1000);
    }
  }
};
</script>

<style lang="less">
// @import "../../style/var.less";
img {
  width: 100%;
  height: 240px;
  display: block;
  // padding: 30px 60px;
  box-sizing: border-box;
  background-color: #fff;
  pointer-events: none;
}
</style>